<template>
    <cl-checkbox v-model="checkVal" @change="handleChange" >checkoutbox</cl-checkbox>
    <cl-checkbox indeterminate>checkoutbox</cl-checkbox>
    <cl-checkbox disabled>checkoutbox</cl-checkbox>
    <div> {{checkedVal}}</div>
    <cl-checkbox-group v-model="checkedVal" @change="groupChange">
        <cl-checkbox v-for="item in checksVal" :key="item" :label="item">{{item}}</cl-checkbox>
     </cl-checkbox-group>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { useCheckbox } from '../hooks/useCheckbox'

export default defineComponent({
    setup() {
        const handleChange = (val)=>{
            console.log(val)
        }
        const groupChange = (val)=>{
            console.log(val)
        }
        // 如果使用 reactive 改变的是checkedVal 而不是改变的数组是不会触发更新的  reactive适用于对象
        const checkedVal = ref(['上海','杭州'])
        const checksVal = ref(['上海','北京','杭州','天津'])
        return {
             ...useCheckbox(),
             handleChange,
             groupChange,
             checksVal,
             checkedVal
        }
    },
})
</script>
